<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>网上银行用户注册</title>
	<!--1.引入bootstrap样式框架；-->
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

	<!--2.引入angularJS分页样式的框架；-->
	<link rel="stylesheet" href="angularjs/pagination.css">

	<link rel="stylesheet" href="layer/theme/default/layer.css">

	<!--3.引入bootstrap中的Jquery框架；-->
	<script src="bootstrap/js/jquery.min.js"></script>
	<!--4.引入bootstrap中的Js框架；-->
	<script src="bootstrap/js/bootstrap.min.js"></script>

	<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
	<script src="//cdn.bootcss.com/angular.js/1.5.8/angular-route.js"></script>

	<!--<script src="//unpkg.com/angular-ui-router@0.4.2/release/angular-ui-router.js"></script>-->
	<!--6.引入AngularJS分布的JS框架-->
	<script src="angularjs/pagination.js"></script>

	<script src="layer/layer.js"></script>


<style type="text/css">
	.el-register-form{
		width:600px;
		margin-left:auto;
		margin-right:auto;
		margin-top: 20px;
	}
	.el-register-form .form-control{
		width: 220px;
		display: inline;
	}
</style>

</head>
<body>
<div>
	<ol class="breadcrumb" style="margin-top: 0px;margin-bottom: 0;">
		<li><a >Home</a></li>
		<li><a >银行</a></li>
		<li><a href="index.html">返回首页</a></li>
		<li><a href="login.html.html">立刻登录</a></li>
	</ol>
</div>
<div ng-cloak ng-app="myApp" style="margin-top: 60px;">
	<form name="myForm"  ng-controller="formController" class="container form-horizontal">
		<h1 style="margin-left: 330px;">网上银行用户注册</h1>
		<p>&nbsp;</p>
		<div class="form-group has-feedback" ng-class="{'has-error':myForm.ukPhone.$dirty && myForm.ukPhone.$invalid}">
			<label class="col-sm-4 control-label">电话</label>
			<div class="col-sm-4">
				<input type="text" autocomplete="off" name="ukPhone"  ng-required="true" required autofocus ng-minlength="11" ng-maxlength="11" ng-model="register.ukPhone" class="form-control" placeholder="电话号码">
				<div ng-show="myForm.ukPhone.$dirty && myForm.ukPhone.$error.maxlength" class="alert alert-danger help-block">
					电话长度不能超过11位
				</div>
				<div ng-show="myForm.ukPhone.$dirty && myForm.ukPhone.$error.minlength" class="alert alert-danger help-block">
					电话格式错误
				</div>

			</div>
		</div>
		<div class="form-group" ng-class="{'has-error':myForm.userPassword.$dirty && myForm.userPassword.$invalid}">
			<label class="col-sm-4 control-label">密 码</label>
			<div class="col-sm-4">
				<input type="password" autocomplete="off" name="userPassword" ng-required="true" ng-minlength="6" ng-maxlength="10" ng-model="register.userPassword" class="form-control" placeholder="密码">
				<div ng-show="myForm.userPassword.$dirty && myForm.userPassword.$error.maxlength" class="alert alert-danger help-block">
					密码长度不能超过10位
				</div>
				<div ng-show="myForm.userPassword.$dirty && myForm.userPassword.$error.minlength" class="alert alert-danger help-block">
					密码长度不能少于6位
				</div>
			</div>
		</div>

		<div class="form-group" ng-class="{'has-error':myForm.passwordConfirm.$dirty && myForm.passwordConfirm.$invalid}">
			<label class="col-sm-4 control-label">确认密码</label>
			<div class="col-sm-4">
				<input type="password" autocomplete="off" name="passwordConfirm" ng-required="true" ng-model="register.passwordConfirm" class="form-control" placeholder="confirm password">
				<div ng-show="myForm.userPassword.$dirty && myForm.passwordConfirm.$dirty && register.userPassword!==register.passwordConfirm" class="alert alert-danger help-block">
					确认密码与密码不一致
				</div>
			</div>
		</div>

		<div class="form-group has-feedback" ng-class="{'has-error':myForm.userName.$dirty && myForm.userName.$invalid}">
			<label class="col-sm-4 control-label">姓名</label>
			<div class="col-sm-4">
				<input type="text" autocomplete="off" name="userName"  ng-required="true"  ng-model="register.userName" class="form-control" placeholder="输入姓名">
			</div>
		</div>
		<div class="form-group has-feedback" ng-class="{'has-error':myForm.userNameSoundmark.$dirty && myForm.userNameSoundmark.$invalid}">
			<label class="col-sm-4 control-label">姓名(拼音)</label>
			<div class="col-sm-4">
				<input type="text" autocomplete="off" name="userNameSoundmark" ng-pattern="/^[a-zA-Z]{1}/" ng-required="true" ng-model="register.userNameSoundmark" class="form-control" placeholder="输入姓名拼音">
				<div ng-show="myForm.userNameSoundmark.$dirty && myForm.userNameSoundmark.$error.pattern" class="alert alert-danger help-block">
					格式错误
				</div>
			</div>
		</div>
		<div class="form-group has-feedback" ng-class="{'has-error':myForm.birthday.$dirty && myForm.birthday.$invalid}">
			<label class="col-sm-4 control-label">生日</label>
			<div class="col-sm-4">
				<input type="date" autocomplete="off" name="birthday"  ng-required="true"  ng-model="register.birthday" class="form-control" placeholder="输入日期">
			</div>
		</div>
		<div class="form-group has-feedback" ng-class="{'has-error':myForm.sex.$dirty && myForm.sex.$invalid}">
			<label class="col-sm-4 control-label">性别</label>
			<div class="col-sm-4">
				<input type="radio" autocomplete="off" name="sex"  ng-required="true"  ng-model="register.sex"  value="0">男
				<input type="radio" autocomplete="off" name="sex"  ng-required="true"  ng-model="register.sex"  value="1">女
			</div>
		</div>
		<div class="form-group has-feedback" ng-class="{'has-error':myForm.ukNumber.$dirty && myForm.ukNumber.$invalid}">
			<label class="col-sm-4 control-label">证件号码</label>
			<div class="col-sm-4">
				<input type="text" autocomplete="off" name="ukNumber"  ng-required="true"  ng-model="register.ukNumber" class="form-control" placeholder="输入身份证">
			</div>
		</div>
		<div class="form-group" ng-class="{'has-error':myForm.acountPassword.$dirty && myForm.acountPassword.$invalid}">
			<label class="col-sm-4 control-label">支付密码</label>
			<div class="col-sm-4">
				<input type="password" autocomplete="off" name="acountPassword" ng-required="true" ng-minlength="6" ng-maxlength="6" ng-model="register.acountPassword" class="form-control" placeholder="密码">
				<div ng-show="myForm.acountPassword.$dirty && myForm.acountPassword.$error.maxlength" class="alert alert-danger help-block">
					请输入6位支付密码
				</div>
				<div ng-show="myForm.acountPassword.$dirty && myForm.acountPassword.$error.minlength" class="alert alert-danger help-block">
					请输入6位支付密码
				</div>
			</div>
		</div>
		<!--<div class="form-group has-feedback">
			<label class="col-sm-4 control-label">验证码</label>
			<div class="col-sm-4">
				<input type="text" autocomplete="off" name="yanZheng"  ng-required="true" class="form-control" placeholder="输入验证码">
			</div>
		</div>-->
		<div class="form-group">
			<div class="col-sm-offset-4 col-sm-4">
				<button type="submit" class="btn btn-success col-sm-6" ng-click="confirm()" ng-disabled="myForm.$invalid||data.passwordConfirm!==data.userPassword">注册</button>
				<button type="reset" class="btn btn-info col-sm-6" ng-click="reset()">重置</button>
			</div>
		</div>
	</form>
</div>
<script>
    angular.module('myApp', [])
        .controller('formController', function($scope,$http) {
            $scope.confirm = function() {
                console.log($scope.register);
                $http.post("http://127.0.0.1:12000/user/tourist/register",$scope.register).success(function (data) {
					if (data.code == 200) {
					    alert(data.msg);
                        $scope.myForm.$setPristine();
                        window.location.href='/login.html';
					}else {
                        alert(data.msg);
                        $scope.myForm.$setPristine();
					}
                });
            }
            $scope.reset = function() {
                $scope.myForm.$setPristine();
            }
        });
</script>
</body>

</html>